<template>
  <animated-dialog ref="dialog">
    <div class="wrapper flex-v flex-vc">
      <span>全部关联记录</span>

      <div class="content-wrapper">
        <div
          class="trade-bill-wrapper flex-h flex-vc flex-hsb"
          v-for="(item,index) in dataList"
          :key="index"
          @click="push(item)"
        >
          <span>{{item.tradeNo}}</span>
          <i class="icon iconfont icon-rightangel"></i>
        </div>
      </div>

      <button
        class="trade-cancel-btn"
        @click="hide"
      >取消</button>
    </div>
  </animated-dialog>
</template>

<script>
import AnimatedDialog from '@/components/animateddialog/AnimatedDialog'
import { open } from '@/utils/JumpUtils.js'
import { BUS_CONSUME_RETURN } from '../constants/TradeType.js'
export default {
  components: {
    'animated-dialog': AnimatedDialog
  },
  data() {
    return {
      dataList: [],
      tradeType: 0
    }
  },
  methods: {
    show() {
      this.$refs.dialog.show()
    },
    hide() {
      this.$refs.dialog.hide()
    },
    push(item) {
      this.hide()
      let tradeNo = item.tradeNo
      let tradeType = item.tradeType
      // 判断当前关联账单的交易场景是消费还是退款
      let needTv = tradeType === BUS_CONSUME_RETURN
      // open('routebill.html?tradetype=' + this.tradeType + '&tradeno=' + tradeNo + '&_tv=' + needTv)
      open(`routebill.html?tradetype=${tradeType}&tradeno=${tradeNo}&_tv=${needTv}`)
    }
  }
}
</script>

<style scoped>
.wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 750px;
  background: #fff;
  max-height: 860px;
}

.content-wrapper {
  overflow: auto;
  max-height: 680px;
}

.wrapper > span:first-of-type {
  width: 750px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #999;
  font-size: 14px; /*no*/
}
.wrapper > button:first-of-type {
  width: 750px;
  height: 90px;
  line-height: 90px;
  color: #333;
  font-size: 14px; /*no*/
}
.trade-bill-wrapper {
  width: 750px;
  height: 90px;
  line-height: 90px;
  color: #333;
  font-size: 14px; /*no*/
}
.trade-bill-wrapper > * {
  margin: 0px 30px;
}
.trade-cancel-btn {
  border: none;
  background-color: #fff;
  color: #333;
}
</style>
